<template>
  <div class="profile">
    <breadcrumb title="个人信息" homePath="/teacher" />
    <el-card>
      <!-- 基本信息 -->
      <el-row :gutter="40">
        <el-col :span="20">
          <!-- 用户信息 -->
          <el-descriptions
            class="margin-top"
            title="用户信息"
            :column="3"
            border
          >
            <el-descriptions-item label="用户名">
              {{ studentData.username }}
            </el-descriptions-item>
            <el-descriptions-item label="管理班级">
              {{ studentData.classes }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
              {{ studentData.sex }}
            </el-descriptions-item>
            <el-descriptions-item label="籍贯">
              {{ studentData.address }}
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">
              {{ studentData.create_time | dateFormat }}
            </el-descriptions-item>
            <el-descriptions-item label="身份">
              {{ studentData.type == 2 ? "学生" : "老师" }}
            </el-descriptions-item>
          </el-descriptions>
        </el-col>
        <el-col :span="4" class="avatar">
          <upload-avatar ref="avatarRef" />
          <el-button type="primary" size="mini" @click="updateAvatar"
            >更新头像</el-button
          >
        </el-col>
      </el-row>
      <!-- 修改密码 -->
      <el-card>
        <h1>修改密码</h1>
        <el-form
          :model="userForm"
          status-icon
          :rules="userRules"
          ref="userFormRef"
          label-width="80px"
          class="update-passsword"
        >
          <el-form-item label="旧密码" prop="oldpassword">
            <el-input
              type="password"
              v-model="userForm.oldpassword"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="新密码" prop="newpassword">
            <el-input
              type="password"
              v-model="userForm.newpassword"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="repassword">
            <el-input
              type="password"
              v-model="userForm.repassword"
              autocomplete="off"
              show-password
            ></el-input>
          </el-form-item>
          <!-- 提交和重置 -->
          <el-form-item>
            <el-button type="primary" @click="submitForm">提交</el-button>
            <el-button @click="resetForm" style="margin-left: 80px"
              >重置</el-button
            >
          </el-form-item>
        </el-form>
      </el-card>
    </el-card>
  </div>
</template>

<script>
import Breadcrumb from "components/Breadcrumb";
import UploadAvatar from "components/UploadAvatar";

import { getUserDataByToken } from "network/users/getUserDataByToken";
import { updateAvatar } from "network/users/updateAvatar";
import { updatePassword } from "network/users/updatePassword";
export default {
  name: "Profile",
  data() {
    var repasswordChecked = (rule, value, callback) => {
      if (value !== this.userForm.newpassword) {
        callback(new Error("两次输入密码不一致!"));
      } else if (value == this.userForm.oldpassword) {
        callback(new Error("新密码和旧密码不能一致!"));
      } else {
        callback();
      }
    };
    return {
      baseInfoText: "",
      studentData: [],
      userForm: {
        oldpassword: "",
        newpassword: "",
        repassword: "",
      },
      userRules: {
        oldpassword: [
          { required: true, message: "旧密码不能为空", trigger: "blur" },
        ],
        newpassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
        ],
        repassword: [
          { validator: repasswordChecked, trigger: "blur" },
          { required: true, message: "请再次输出密码", trigger: "blur" },
        ],
      },
    };
  },
  components: {
    Breadcrumb,
    UploadAvatar,
  },
  async created() {
    this.$store.commit("setCurrentIndex", {
      type: "teacherCurrentIndex",
      index: 3,
    });

    let res = await getUserDataByToken(window.sessionStorage.getItem("token"));
    this.studentData = res;
    this.$refs.avatarRef.imgUrl = this.baseHttp + res.head;
  },
  methods: {
    // 确认上传头像
    async updateAvatar() {
      let head = this.$refs.avatarRef.path;
      if (head == "") {
        return this.$message.error("请先上传头像");
      }
      let token = window.sessionStorage.getItem("token");
      let res = await updateAvatar({ head, token });
      if (res.results == "success") {
        this.$message.success("更新头像成功");
      }
      this.$store.commit("setAvatarPath", head);
    },
    // 提交表单
    submitForm() {
      this.$refs.userFormRef.validate(async (valid) => {
        if (valid) {
          let { newpassword, oldpassword } = this.userForm;
          const res = await updatePassword({
            token: window.sessionStorage.getItem("token"),
            newpassword,
            oldpassword,
          });
          if (res == "修改成功") {
            this.$message.success(res + "~~即将返回登录页面");
            setTimeout(() => {
              window.sessionStorage.removeItem("token");
              this.$router.replace("/login");
            }, 1000);
          } else {
            this.$message.info(res);
          }
        } else {
          return this.$message.error("信息有误！！");
        }
      });
    },
    // 重置表单
    resetForm() {
      this.$refs.userFormRef.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
.profile {
  .el-card {
    position: relative;
    padding: 5px 20px 20px;
    h1 {
      border-bottom: 1px solid #ccc;
      padding-bottom: 10px;
      text-align: center;
    }
    .avatar {
      text-align: center;
      .el-button {
        margin-top: 20px;
      }
    }
    .el-card {
      margin-top: 20px auto;
      width: 500px;
      transform: translateX(60%);
      box-shadow: 6px 6px 5px #888888 !important;
      text-align: center;
      h1 {
        padding: 0 0 10px;
        margin: 0 0 10px;
      }
    }
    .update-passsword {
      .el-input {
        width: 300px;
      }
    }
  }
}
</style>